<template>
  <!-- 搜索列表 -->
   <div class="searchlist">
<ul>
  <li class="smlBox" v-for="item in searchList" :key="item.proid">
  <p class="img">
    <img :src="item.img1" alt="">
  </p>       
        <p class="name">{{item.proname}}</p>  
  </li>
</ul>

   </div>
</template>

<script lang="ts" setup>

import { inject } from 'vue';
import type{MyMiaoSaItem} from '@/config/interface'
const searchList = inject<MyMiaoSaItem>('searchList')
console.log('searchList' , searchList);

</script>
<style scoped lang="scss">

.smlBox{
width: 100%;
height: 100px;
display: flex;
margin-bottom: 20px;
  >.img{
    width: 30%; 
    margin-right: 10px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  >.name{
    width: 60%;
    display:-webkit-box; //将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）

-webkit-line-clamp:2; //这个属性需要同上面两个属性一起使用，表示显示的行数。

  }
}
   

</style>